<template>
  <div class="playlist-detail">
    <header @click="$router.back()">✖</header>

    <div class="thumb">
      <img :src="routerObject.coverImgUrl" alt="" />
    </div>

    <div class="container">
      <div class="title">{{ routerObject.name }}</div>

      <div class="author">
        <div class="img">
          <img :src="routerObject.avatarUrl" alt="" />
        </div>
        <div class="name">{{ routerObject.nickname }}</div>
      </div>

      <div class="tag" v-if="routerObject.expertTags">
        <span
          class="item"
          v-for="(item, index) in routerObject.expertTags"
          :key="index"
        >
          {{ item }}
        </span>
      </div>

      <div class="message">
        <div class="description">{{ routerObject.description }}</div>
        <div class="create">
          —— 歌单创建于{{ routerObject.createTime | formatDate }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlaylistDetail",

  computed: {
    // 优化数据结构
    routerObject() {
      return this.$route.query;
    },
  },
};
</script>

<style lang="less" scoped>
.playlist-detail {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to bottom, #d8be8b, #d0c8bb);
  position: fixed;
  inset: 0;
  z-index: 10;

  header {
    width: 95%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    font-size: 25px;
  }

  .thumb {
    width: 100%;
    text-align: center;

    img {
      width: 300px;
      border-radius: 15px;
    }
  }

  .container {
    width: 80%;
    margin: 0 auto;

    .title {
      font-weight: bolder;
      font-size: 20px;
    }

    .author {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        width: 30px;
        height: 100%;

        img {
          border-radius: 50%;
        }
      }

      .name {
        padding-left: 5px;
      }
    }

    .tag {
      text-align: center;

      .item {
        display: inline-block;
        line-height: 40px;
        margin: 0 10px;
        background-color: #d4c8ba;
        font-size: 14px;
      }
    }

    .message {
      color: #707070;
      font-size: 14px;

      .description {
        width: 100%;
        height: 100px;
        overflow: scroll;
        margin-bottom: 20px;
      }

      .create {
        text-align: right;
      }
    }
  }
}
</style>
